<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟换衣预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 固定的模特展示区域 */
        .model-display-area {
            height: 60vh;
            position: relative;
            background: linear-gradient(135deg, #87CEEB 0%, #98FB98 50%, #F0E68C 100%);
            overflow: hidden;
        }
        
        .status-bar {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 10;
        }
        
        .energy-info {
            background: rgba(255, 255, 255, 0.9);
            padding: 6px 12px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .energy-icon {
            font-size: 12px;
            color: #ff6b6b;
        }
        
        .energy-text {
            font-size: 12px;
            color: #333;
            font-weight: 500;
        }
        
        .model-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .model-image {
            width: 100%;
            height: 100%;
            background: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 18px;
        }
        
        .floating-buttons {
            position: absolute;
            right: 20px;
            bottom: 60px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .float-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .float-btn:hover {
            transform: scale(1.05);
        }
        
        .btn-icon {
            font-size: 16px;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            height: 60px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-top: 1px solid #e5e5e5;
            box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b9d;
        }
        
        .nav-item.active .nav-text {
            color: #ff6b9d;
        }
        
        .nav-icon {
            font-size: 18px;
            color: #999;
            margin-bottom: 2px;
        }
        
        .nav-text {
            font-size: 10px;
            color: #666;
        }
        
        /* 底部内容区域 */
        .bottom-content {
            flex: 1;
            background: #f8f8f8;
            overflow-y: auto;
            padding: 10px;
        }
        
        .content-panel {
            width: 100%;
        }
        
        /* 今日运势 */
        .daily-fortune {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .fortune-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .fortune-input {
            margin-bottom: 10px;
        }
        
        .birthday-input {
            width: 100%;
            height: 40px;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            padding: 0 10px;
            font-size: 14px;
            background: #f9f9f9;
        }
        
        .fortune-btn {
            width: 100%;
            height: 40px;
            background: linear-gradient(135deg, #ff6b9d, #c44569);
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
        
        /* 商品区域 */
        .recommended-products {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .products-scroll {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
        }
        
        .product-item {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            min-width: 140px;
            flex-shrink: 0;
        }

        .product-image-container {
            position: relative;
            width: 100%;
            height: 150px;
        }

        .product-image {
            width: 100%;
            height: 100%;
            background: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 12px;
        }

        .product-favorite {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 25px;
            height: 25px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
        }

        .product-info {
            padding: 10px;
        }

        .product-name {
            font-size: 13px;
            color: #333;
            font-weight: 500;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .product-price {
            font-size: 14px;
            color: #ff6b9d;
            font-weight: bold;
        }
        
        .product-actions {
            padding: 10px;
            display: flex;
            gap: 5px;
        }
        
        .action-btn {
            flex: 1;
            height: 30px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .try-btn {
            background: linear-gradient(135deg, #ff6b9d, #c44569);
            color: #fff;
        }

        .view-btn {
            background: #f0f0f0;
            color: #666;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 固定的模特展示区域 -->
        <div class="model-display-area">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <div class="energy-info">
                    <span class="energy-icon">⚡</span>
                    <span class="energy-text">剩余算力: 85</span>
                </div>
            </div>

            <!-- 模特图片容器 -->
            <div class="model-container">
                <div class="model-image">
                    模特图片
                </div>
            </div>

            <!-- 右侧悬浮按钮 -->
            <div class="floating-buttons">
                <button class="float-btn camera-btn">
                    <span class="btn-icon">📷</span>
                </button>
                <button class="float-btn refresh-btn">
                    <span class="btn-icon">🔄</span>
                </button>
            </div>
        </div>

        <!-- 底部功能导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="switchTab('favorite')">
                <span class="nav-icon">⭐</span>
                <span class="nav-text">今日推荐</span>
            </div>
            <div class="nav-item" onclick="switchTab('products')">
                <span class="nav-icon">👗</span>
                <span class="nav-text">全部商品</span>
            </div>
            <div class="nav-item" onclick="switchTab('background')">
                <span class="nav-icon">🖼️</span>
                <span class="nav-text">换背景</span>
            </div>
            <div class="nav-item" onclick="switchTab('faceSwap')">
                <span class="nav-icon">👤</span>
                <span class="nav-text">逛街</span>
            </div>
            <div class="nav-item" onclick="switchTab('wardrobe')">
                <span class="nav-icon">👔</span>
                <span class="nav-text">我的衣橱</span>
            </div>
        </div>

        <!-- 底部内容区域 -->
        <div class="bottom-content">
            <!-- 今日推荐 -->
            <div class="content-panel" id="favorite-panel">
                <div class="daily-fortune">
                    <div class="fortune-title">查看今日运势</div>
                    <div class="fortune-input">
                        <input class="birthday-input" placeholder="请输入出生年月日" />
                    </div>
                    <button class="fortune-btn">查看运势</button>
                </div>
                
                <div class="recommended-products">
                    <div class="section-title">今日推荐商品</div>
                    <div class="products-scroll">
                        <div class="product-item">
                            <div class="product-image-container">
                                <div class="product-image">连衣裙</div>
                                <div class="product-favorite">❤️</div>
                            </div>
                            <div class="product-info">
                                <div class="product-name">时尚连衣裙</div>
                                <div class="product-price">¥299</div>
                            </div>
                            <div class="product-actions">
                                <button class="action-btn try-btn">试穿</button>
                                <button class="action-btn view-btn">查看</button>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="product-image-container">
                                <div class="product-image">T恤</div>
                                <div class="product-favorite">🤍</div>
                            </div>
                            <div class="product-info">
                                <div class="product-name">休闲T恤</div>
                                <div class="product-price">¥89</div>
                            </div>
                            <div class="product-actions">
                                <button class="action-btn try-btn">试穿</button>
                                <button class="action-btn view-btn">查看</button>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="product-image-container">
                                <div class="product-image">牛仔裤</div>
                                <div class="product-favorite">❤️</div>
                            </div>
                            <div class="product-info">
                                <div class="product-name">牛仔裤</div>
                                <div class="product-price">¥199</div>
                            </div>
                            <div class="product-actions">
                                <button class="action-btn try-btn">试穿</button>
                                <button class="action-btn view-btn">查看</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他面板内容 -->
            <div class="content-panel hidden" id="products-panel">
                <div class="section-title">全部商品</div>
                <div class="products-scroll">
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">连衣裙</div>
                            <div class="product-favorite">❤️</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">时尚连衣裙</div>
                            <div class="product-price">¥299</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">T恤</div>
                            <div class="product-favorite">🤍</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">休闲T恤</div>
                            <div class="product-price">¥89</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">牛仔裤</div>
                            <div class="product-favorite">❤️</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">牛仔裤</div>
                            <div class="product-price">¥199</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">运动鞋</div>
                            <div class="product-favorite">🤍</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">运动鞋</div>
                            <div class="product-price">¥399</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">针织衫</div>
                            <div class="product-favorite">🤍</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">针织衫</div>
                            <div class="product-price">¥159</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-image-container">
                            <div class="product-image">风衣</div>
                            <div class="product-favorite">❤️</div>
                        </div>
                        <div class="product-info">
                            <div class="product-name">风衣</div>
                            <div class="product-price">¥599</div>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn try-btn">试穿</button>
                            <button class="action-btn view-btn">查看</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-panel hidden" id="background-panel">
                <!-- 背景素材选择 -->
                <div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px;">
                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 15px;">选择背景素材</div>
                    <div class="products-scroll">
                        <!-- 上传按钮 -->
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px dashed #ccc; border-radius: 8px; background: #f9f9f9;">
                            <div style="width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999;">
                                <div style="font-size: 24px; margin-bottom: 8px;">📷</div>
                                <div style="font-size: 12px;">上传背景</div>
                            </div>
                        </div>
                        <!-- 背景选项 -->
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid #ff6b9d; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #87CEEB, #98FB98); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">海滩</div>
                            <div style="padding: 8px; font-size: 12px;">已选择</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #333, #666); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">城市</div>
                            <div style="padding: 8px; font-size: 12px;">城市夜景</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #228B22, #32CD32); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">森林</div>
                            <div style="padding: 8px; font-size: 12px;">森林</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">工作室</div>
                            <div style="padding: 8px; font-size: 12px;">工作室</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #4682B4, #87CEEB); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">雪山</div>
                            <div style="padding: 8px; font-size: 12px;">雪山</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #FF69B4, #FFB6C1); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">花园</div>
                            <div style="padding: 8px; font-size: 12px;">花园</div>
                        </div>
                    </div>
                </div>

                <!-- 开始换背景按钮 -->
                <button style="width: 100%; height: 40px; background: linear-gradient(135deg, #ff6b9d, #c44569); color: white; border: none; border-radius: 5px; font-size: 14px; font-weight: bold;">
                    开始换背景 (消耗1 Token)
                </button>
            </div>

            <div class="content-panel hidden" id="faceSwap-panel">
                <!-- 脸部素材选择 -->
                <div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px;">
                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 15px;">我的形象</div>
                    <div class="products-scroll">
                        <!-- 上传按钮 -->
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px dashed #ccc; border-radius: 8px; background: #f9f9f9;">
                            <div style="width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999;">
                                <div style="font-size: 24px; margin-bottom: 8px;">📷</div>
                                <div style="font-size: 12px;">上传照片</div>
                            </div>
                        </div>
                        <!-- 脸部素材选项 -->
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid #ff6b9d; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸1</div>
                            <div style="padding: 8px; font-size: 12px;">已选择</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸2</div>
                            <div style="padding: 8px; font-size: 12px;">明星脸2</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸3</div>
                            <div style="padding: 8px; font-size: 12px;">明星脸3</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸4</div>
                            <div style="padding: 8px; font-size: 12px;">明星脸4</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸5</div>
                            <div style="padding: 8px; font-size: 12px;">明星脸5</div>
                        </div>
                        <div style="min-width: 120px; margin-right: 15px; text-align: center; border: 2px solid transparent; border-radius: 8px; overflow: hidden;">
                            <div style="width: 120px; height: 120px; background: #ddd; display: flex; align-items: center; justify-content: center; font-size: 12px;">明星脸6</div>
                            <div style="padding: 8px; font-size: 12px;">明星脸6</div>
                        </div>
                    </div>
                </div>

                <!-- 开始换脸按钮 -->
                <button style="width: 100%; height: 40px; background: linear-gradient(135deg, #ff6b9d, #c44569); color: white; border: none; border-radius: 5px; font-size: 14px; font-weight: bold;">
                    开始换脸 (消耗1 Token)
                </button>
            </div>

            <div class="content-panel hidden" id="wardrobe-panel">
                <!-- 分类管理 -->
                <div style="background: white; border-radius: 10px; padding: 20px; margin-bottom: 15px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <div class="section-title" style="margin: 0;">我的衣橱</div>
                        <button style="background: linear-gradient(135deg, #4ecdc4, #44a08d); color: white; border: none; border-radius: 15px; padding: 8px 15px; font-size: 12px;">+ 新建分类</button>
                    </div>

                    <!-- 分类标签 -->
                    <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;">
                        <div style="background: linear-gradient(135deg, #ff6b9d, #c44569); color: white; border-radius: 15px; padding: 8px 15px; font-size: 12px; white-space: nowrap;">全部 (5)</div>
                        <div style="background: #f0f0f0; color: #666; border-radius: 15px; padding: 8px 15px; font-size: 12px; white-space: nowrap;">上装 (3)</div>
                        <div style="background: #f0f0f0; color: #666; border-radius: 15px; padding: 8px 15px; font-size: 12px; white-space: nowrap;">下装 (1)</div>
                        <div style="background: #f0f0f0; color: #666; border-radius: 15px; padding: 8px 15px; font-size: 12px; white-space: nowrap;">外套 (1)</div>
                    </div>
                </div>

                <!-- 衣橱商品 -->
                <div style="background: white; border-radius: 10px; padding: 20px;">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
                        <div class="product-item">
                            <div class="product-image-container">
                                <div class="product-image">连衣裙</div>
                                <div style="position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 8px; font-size: 10px;">上装</div>
                            </div>
                            <div class="product-info">
                                <div class="product-name">时尚连衣裙</div>
                                <div class="product-price">¥299</div>
                            </div>
                            <div style="padding: 0 10px 10px; display: flex; gap: 5px;">
                                <button style="flex: 1; height: 25px; background: linear-gradient(135deg, #ff6b9d, #c44569); color: white; border: none; border-radius: 4px; font-size: 10px;">试穿</button>
                                <button style="flex: 1; height: 25px; background: #4ecdc4; color: white; border: none; border-radius: 4px; font-size: 10px;">移动</button>
                                <button style="flex: 1; height: 25px; background: #ff6b6b; color: white; border: none; border-radius: 4px; font-size: 10px;">移除</button>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="product-image-container">
                                <div class="product-image">T恤</div>
                                <div style="position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 8px; border-radius: 8px; font-size: 10px;">上装</div>
                            </div>
                            <div class="product-info">
                                <div class="product-name">休闲T恤</div>
                                <div class="product-price">¥89</div>
                            </div>
                            <div style="padding: 0 10px 10px; display: flex; gap: 5px;">
                                <button style="flex: 1; height: 25px; background: linear-gradient(135deg, #ff6b9d, #c44569); color: white; border: none; border-radius: 4px; font-size: 10px;">试穿</button>
                                <button style="flex: 1; height: 25px; background: #4ecdc4; color: white; border: none; border-radius: 4px; font-size: 10px;">移动</button>
                                <button style="flex: 1; height: 25px; background: #ff6b6b; color: white; border: none; border-radius: 4px; font-size: 10px;">移除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function switchTab(tab) {
            // 移除所有导航项的active类
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加active类到当前点击的导航项
            event.currentTarget.classList.add('active');
            
            // 隐藏所有内容面板
            document.querySelectorAll('.content-panel').forEach(panel => {
                panel.classList.add('hidden');
            });
            
            // 显示对应的内容面板
            const panel = document.getElementById(tab + '-panel');
            if (panel) {
                panel.classList.remove('hidden');
            }
        }
    </script>
</body>
</html>
